<script>
import axios from 'axios';
export default {
    name: 'finder',
    data() {
        return {
            path: '/',
            dir_path: [],
            dir_path_index: -1,
            dir_list: [],
            file_list: [],
            prev_disabled: true,
            next_disabled: true,
            up_disabled: true,
        };
    },
    mounted() {
        var self = this;
        this.dir_path.push('/');
        ++this.dir_path_index;
        axios.get('http://127.0.0.1/finder?path=/').then((res) => {
            var data = res.data;
            self.dir_list = data['dir_list'];
            self.file_list = data['file_list'];
        }).catch((err) => {
            alert('数据获取失败');
            console.error(err);
        });
    },
    watch: {
        path(new_path) {
            var self = this;
            axios.get('http://127.0.0.1/finder?path=' + new_path).then((res) => {
                var data = res.data;
                self.dir_list = data['dir_list'];
                self.file_list = data['file_list'];
                self.up_disabled = new_path === '/';
            }).catch((err) => {
                alert('数据获取失败');
                console.error(err);
            });
        },
        dir_path_index(new_dir_path_index) {
            this.prev_disabled = new_dir_path_index === 0;
            this.next_disabled = new_dir_path_index > this.dir_path.length - 2;
        }
    },
    methods: {
        get_filename(filename) {
            var path_arr = filename.split('/');
            var last = '';
            for (let i in path_arr) {
                if (path_arr[i] !== '') {
                    last = path_arr[i];
                }
            }
            return last;
        },
        li_click(item) {
            for (let i in this.dir_list) {
                this.dir_list[i].selected = '';
            }
            for (let i in this.file_list) {
                this.file_list[i].selected = '';
            }
            item.selected = 'selected';
        },
        ul_click() {
            for (let i in this.dir_list) {
                this.dir_list[i].selected = '';
            }
            for (let i in this.file_list) {
                this.file_list[i].selected = '';
            }
        },
        li_dblclick(item) {
            this.dir_path.splice(
                this.dir_path_index + 1,
                this.dir_path.length
            );
            this.path = item.filename + '/';
            this.dir_path.push(this.path);
            ++this.dir_path_index;
        },
        go_prev() {
            if (this.dir_path_index > 0) {
                --this.dir_path_index;
                this.path = this.dir_path[this.dir_path_index];
                this.next_disabled = false;
            }
        },
        go_next() {
            if (this.dir_path_index < this.dir_path.length - 1) {
                ++this.dir_path_index;
                this.path = this.dir_path[this.dir_path_index];
                this.prev_disabled = false;
            }
        },
        go_up() {
            ++this.dir_path_index;
            this.prev_disabled = false;
            this.path = this.path.substring(0, this.path.lastIndexOf('/', this.path.length - 2) + 1);
            this.dir_path.push(this.path);
        },
        go_path() {
            this.dir_path.push(this.path);
            this.prev_disabled = false;
            ++this.dir_path_index;
        }
    }
}
</script>

<style src="/node_modules/bootstrap/dist/css/bootstrap.min.css"></style>
<style src="/node_modules/font-awesome/css/font-awesome.min.css"></style>

<template>
    <div class="btn-group" id="finder-tools" role="group" oncontextmenu="return false;">
        <button type="button"
                class="btn btn-light"
                v-on:click="go_prev"
                v-bind:disabled="prev_disabled">
            <i class="fa fa-arrow-left"></i>
        </button>
        <button type="button"
                class="btn btn-light"
                v-on:click="go_next"
                v-bind:disabled="next_disabled">
            <i class="fa fa-arrow-right"></i>
        </button>
        <button type="button"
                class="btn btn-light"
                v-on:click="go_up"
                v-bind:disabled="up_disabled">
            <i class="fa fa-arrow-up"></i>
        </button>
        <input type="text" class="form-control" placeholder="请输入路径" v-model="path" v-on:keyup.enter="go_path">
    </div>
    <ul id="content" v-on:click="ul_click" oncontextmenu="return false;">
        <li v-for="item in dir_list"
            v-bind:class="item.selected"
            v-on:click.stop="li_click(item)"
            v-on:dblclick="li_dblclick(item)">
            <div class="icon" v-if="item.is_file"><i class="fa fa-file"></i></div>
            <div class="icon" v-else-if="item.is_dir"><i class="fa fa-folder"></i></div>
            <div class="icon" v-else><i class="fa fa-file-exclamation"></i></div>
            <div class="filename">{{ get_filename(item.filename) }}</div>
        </li>
        <li v-for="item in file_list" v-bind:class="item.selected" v-on:click.stop="li_click(item)">
            <div class="icon" v-if="item.is_file"><i class="fa fa-file"></i></div>
            <div class="icon" v-else-if="item.is_dir"><i class="fa fa-folder"></i></div>
            <div class="icon" v-else><i class="fa fa-file-exclamation"></i></div>
            <div class="filename">{{ get_filename(item.filename) }}</div>
        </li>
    </ul>
</template>

<style scoped>
#content {
    min-height: 100vh;
}
#content > li {
    width: 25%;
    padding: 2rem 0;
    display: inline-block;
}
#content > li:hover,
#content > .selected {
    background-color: #00f;
    color: #fff;
    cursor: default;
}
#content > li > .icon {
    text-align: center;
    font-size: 50px;
}
#content > li > .filename {
    width: 100%;
    text-align: center;
    font-size: 25px;
}
</style>
